<template>
    <view :style="{ '--color': color }">
        <status-bar title="我的预约"></status-bar>
        <view class="Tabs" :style="{ top: totalHeight + 'px' }">
            <u-tabs
                :list="list1"
                @click="click"
                :current="current"
                :itemStyle="itemStyle"
                :activeStyle="activeStyle"
                :scrollable="false"
                :inactiveStyle="inactiveStyle"
                :lineWidth="30"
                :lineColor="color"
            ></u-tabs>
        </view>

        <view class="Wrapper">
            <view class="list" v-for="(item, index) in pageData" :key="index" @click="toUrl(`orderDetails?id=${item.repair_id}`)">
                <view class="listBox">
                    <view class="info">
                        <text class="repair_no" user-select>{{ item.repair_no }}</text>
                        <view class="stateName">{{ item.stateName }}</view>
                    </view>
                    <text class="goods_name" user-select>{{ item.goods_name }}</text>
                    <view class="contact">{{ item.accept_info }}</view>
                    <text class="address" user-select>{{ item.address }}</text>
                </view>
                <view class="enint" v-if="state == 1">
                    <text class="enint_state">{{ item.user_tip }}</text>
                    <view class="enBtn" @click="Cancel(item)">取消预约</view>
                </view>
                <view class="enint" v-else>
                    <view class="Masterworker">
                        <image :src="$imgUrls(item.master_info.master_head)" mode="aspectFill" class="master_head"></image>
                        <view class="workerInfo">
                            <text class="master_name" user-select>{{ item.master_info.master_name }}</text>
                            <text class="master_tel" user-select @click.stop="$common.Tel(item.master_info.master_tel)">{{ item.master_info.master_tel }}</text>
                        </view>
                    </view>
                    <text class="user_tip" v-if="item.userShowType == 'tip'">{{ item.user_tip }}</text>
                    <text class="user_tip color_F74" v-if="item.userShowType == 'time'">已服务：{{ $pop.formatSeconds(item.start_second) }}</text>
                    <view class="btnsBox" v-if="item.userShowType == 'button'">
                        <view class="BtnList playBtn" v-if="item.payShow == 1" @click.stop="nowPlay(item)">立即支付</view>
                        <view class="BtnList commentBtn" v-if="item.commentShow == 1">立即评分</view>

                        <view class="BtnList commentBtn" v-if="item.after_show == 1" @click.stop="afterServer(item)">售后服务</view>
                    </view>
                </view>
            </view>
        </view>
        <emptys v-if="!pageData.length"></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                timer: null,
                list1: [],
                page: 1,
                limit: 10,
                state: 1,
                pageData: [],
                getMore: true,
                current: 0,
                palyrepair_id: ''
            };
        },
        onLoad(opt) {
            if (opt.current) this.current = opt.current;
            if (opt.state) this.state = opt.state;
            // this.getListCount();
        },
        onShow() {
            this.page = 1;
            this.getMore = true;
            this.getListCount();
            let options = wx.getEnterOptionsSync();
            if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
                let extraData = options.referrerInfo.extraData;
                if (!extraData) return;
                if (extraData.code == 'success' && this.palyrepair_id) {
                    const Current = this.pageData.findIndex((n) => n.repair_id == this.palyrepair_id);
                    this.pageData[Current].payShow = 0;
                    this.pageData[Current].commentShow = 1;
                }
            }
        },
        methods: {
            getListCount() {
                this.$http
                    .get({
                        url: '/orderRepairApi/getListCount'
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data.list || [];
                        result.forEach((item) => {
                            item.name = `${item.name}(${item.num})`;
                        });
                        this.list1 = result;
                        this.OrderList();
                    });
            },
            OrderList() {
                this.$http
                    .get({
                        url: '/orderRepairApi/repairOrderList',
                        data: {
                            page: this.page,
                            limit: this.limit,
                            state: this.state
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        clearInterval(this.timer);
                        this.startTimer();
                        if (result.length < this.limit) return (this.getMore = false);
                    });
            },

            async Cancel(Item) {
                const result = await this.$Modal('提示', '确定取消预约?');
                if (!result) return;
                const Res = await Api.cancelOrder(Item.repair_id);
                const Index = this.pageData.findIndex((n) => n.repair_id == Item.repair_id);
                this.pageData.splice(Index, 1);
                this.getListCount();
            },

            click(event) {
                this.page = 1;
                this.getMore = true;
                this.state = event.value;
                this.current = event.index;
                this.$pop.pageScrollTo();
                this.OrderList();
            },

            startTimer() {
                // 在组件初始化时启动定时器
                this.timer = setInterval(() => {
                    this.pageData.forEach((item) => {
                        if (item.start_second && item.userShowType == 'time') {
                            item.start_second++; // 每秒 +1
                        }
                    });
                }, 1000);
            },

            nowPlay(Item) {
                this.$showLoading('');
                this.$http
                    .get({
                        url: '/accountPay/getRepairOrderPay',
                        data: {
                            repair_id: Item.repair_id,
                            payType: 1
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.palyrepair_id = Item.repair_id;
                        const Result = res.data;
                        this.$Payment(Result);
                    });
            },
            afterServer(Item) {
                this.toUrl(`afterSale?repair_id=${Item.repair_id}`);
            }
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        computed: {
            ...mapState(['color', 'totalHeight']),
            itemStyle() {
                return {
                    height: '52px',
                    color: '#999'
                };
            },
            inactiveStyle() {
                return {
                    color: '#666'
                };
            },
            activeStyle() {
                return {
                    color: this.color
                };
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.OrderList();
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $bgF8;
        padding-bottom: 50rpx;
    }
</style>
<style lang="scss" scoped>
    .Tabs {
        width: 100%;
        height: 100rpx;
        background-color: #fff;
        border-top: 1rpx solid #f8f8f8;
        position: fixed;
        left: 0;
        z-index: 100;
    }
    .Wrapper {
        width: 100%;
        margin-top: 120rpx;
    }
    .list {
        width: 710rpx;
        background-color: #fff;

        border-radius: 10rpx;
        margin: 24rpx auto 0;

        .listBox {
            padding: 24rpx;
            display: flex;
            flex-direction: column;
            .info {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .repair_no {
                    flex: 1;
                    color: #000;
                    font-size: 28rpx;
                }
                .stateName {
                    padding: 4rpx 18rpx;
                    background-color: var(--color);
                    color: #fff;
                    font-size: 24rpx;
                }
            }
            .goods_name {
                color: #000;
                font-size: 30rpx;
                margin-top: 12rpx;
            }
            .contact {
                width: 100%;
                margin-top: 12rpx;
                color: #666;
                font-size: 26rpx;
            }
            .address {
                color: #666;
                font-size: 26rpx;
                margin-top: 12rpx;
            }
        }
        .enint {
            width: 100%;
            padding: 20rpx;
            border-top: 1px solid #eaeaea;
            display: flex;
            align-items: center;
            .enint_state {
                flex: 1;
                color: #666;
                font-size: 24rpx;
            }
            .enBtn {
                padding: 14rpx 28rpx;
                background-color: var(--color);
                font-size: 24rpx;
                color: #fff;
                border-radius: 30rpx;
            }
            .Masterworker {
                display: flex;
                align-items: center;
                flex: 1;
                .master_head {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
                .workerInfo {
                    height: 80rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .master_name {
                        color: #000;
                        font-size: 28rpx;
                    }
                    .master_tel {
                        color: #666;
                        font-size: 24rpx;
                    }
                }
            }
            .user_tip {
                color: #666;
                font-size: 24rpx;
            }
            .btnsBox {
                display: flex;
                align-items: center;

                .BtnList {
                    padding: 14rpx 28rpx;
                    border-radius: 36rpx;
                    color: #fff;
                    font-size: 26rpx;
                    margin-left: 10rpx;
                }
                .playBtn {
                    background-color: #f7476d;
                }
                .commentBtn {
                    background-color: var(--color);
                }
            }
        }
    }
</style>
